<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a id="download" href="">下载</a>
    <br>
    <input id="input" type="file">
    <script>
        var str = '123'
        var blob = new Blob([str], {
            type: 'text/plain'
        })
        console.log(blob)
        blob.text().then(res => console.log(res))

        //下载
        download.onclick = function (e) {
            this.setAttribute('download', '123.txt')
            this.href = URL.createObjectURL(blob)
        }

        // 图片预览
        input.onchange = function (e) {
            var file = e.target.files[0]
            console.log(file) // 继承自 File -> Blob -> Object
            // 预览1
            // var fileReader = new FileReader()
            // fileReader.readAsDataURL(file)
            // fileReader.onload = function () {
            //     var img = new Image()
            //     img.src = fileReader.result
            //     document.body.appendChild(img)
            // }

            // 预览2
            var img = new Image()
            img.src = URL.createObjectURL(file)
            document.body.appendChild(img)
        }

    </script>

</body>

</html>